<template>
    <div>
      <h2>编辑员工</h2>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/AdminMain/AdminHome">主页</el-breadcrumb-item>
        <el-breadcrumb-item to="/AdminMain/EmployeeManager">员工管理</el-breadcrumb-item>
        <el-breadcrumb-item>编辑员工</el-breadcrumb-item>
      </el-breadcrumb>
  
      <el-card style="margin-top: 20px;">
        <el-form :model="form" label-width="100px">
          <el-form-item label="工号">
            <el-input v-model="form.employeeAccount" disabled></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.employeeName"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="form.employeeGender"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.employeeAge" type="number"></el-input>
          </el-form-item>
          <el-form-item label="职务">
            <el-input v-model="form.staff"></el-input>
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input v-model="form.employeeMessage"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="onSubmit">确认修改</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import axios from 'axios'
  
  const route = useRoute()
  const router = useRouter()
  
  // 从路由参数中获取employeeAccount
  const employeeAccount = route.query.employeeAccount
  
  // 编辑表单数据（初始数据可以写死或者通过axios加载）
  const form = ref([])
  
  // 后期可以用axios根据employeeAccount去后端查询具体数据
   onMounted(() => {
     if(!employeeAccount){
      ElMessage.error('缺少员工账户')
      return
     }

     axios.get('/server/employee/findById', {params: { employeeAccount }})
      .then(response => {
        if(response.data.code === 200){
          form.value = response.data.data
        }else{
          ElMessage.error('获取员工信息失败')
        }
      })
      .catch(() =>{
        ElMessage.error('请求出错，无法获取员工信息')
      })
   })
  
  const onSubmit = () => {
    axios.put('/server/employee/update',form.value)
      .then(response => {
        if(response.data.code === 200){
          ElMessage.success('修改成功')
          router.push('/AdminMain/EmployeeManager')
        }else{
          ElMessage.error('修改失败：' + response.data.message)
        }
      })
      .catch(()=>{
        ElMessage.error('提交失败，请检查网络或者联系管理员')
      })
  }
  
  const onCancel = () => {
    router.push('/AdminMain/EmployeeManager')
  }


  </script>
  
  <style scoped>
  </style>
  